<template>
  <div class="category_container">
    <el-affix :offset="0">
      <div class="header_wrap">
        <!-- 头部 -->
        <div class="topNavbar">
          <div class="go_back flex" @click="goBack">
            <van-icon size="15px" name="arrow-left" />
            <div class="cate_title">{{ title }}</div>
          </div>
          <div class="searchBox" @click="toSearch">
            <div class="searchBar">
              <img src="../../assets/images/search.png" class="search_icon">
              <span class="search_text">搜索</span>
            </div>
          </div>
          <div class="btn_box" @click="toLogin">
            登录
          </div>
        </div>
        <!-- 标签页点击 -->
        <div class="header_container flex">
          <div class="tabs_container">
            <van-tabs v-model:active="active" swipeable color="#f06742" @click="getNewData">

              <van-tab class="unit_container" :title="'全部'" title-inactive-color="#a3a3ac">
              </van-tab>

              <van-tab class="unit_container" v-for="item in titleList" :key="item.id" :title="item.displayName"
                title-inactive-color="#a3a3ac">
              </van-tab>
            </van-tabs>
          </div>
          <div class="arrow_container" @click="changeBool">
            <van-icon class="arrow_down" name="arrow-down" />
          </div>
        </div>
        <Sort :list="sortList" :sort="sortActive" @changeSort="changeSort"></Sort>
        <div class="dialog_container" v-show="isShow">
          <div class="dialog_head">
            <div class="dialog_text">请选择分类</div>
            <div class="icon_wrapper" @click="changeBool"><van-icon class="arrow_up" name="arrow-up" color="#fe8159" /></div>
          </div>
          <div class="dialog_main flex">
            <div class="dialog_item" @click="clickAllHandler">全部</div>
            <div class="dialog_item" v-for="(item, index) in titleList" :key="item.id"
              @click="clickDialogHandler(item.displayName, index as number)">{{
                item.displayName }}</div>
          </div>
        </div>
      </div>
    </el-affix>
    <!-- 弹出框 -->

    <!-- 主体 -->
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getUnitList">
      <Unit v-for="item in unitList" :key="item.albumId" :item="item" @click="toDetail(item)"></Unit>
      <el-backtop :right="30" :bottom="30" />
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from "vue-router"

import Unit from "@/views/category2/components/Unit/index.vue"
import Sort from "@/views/category2/components/Sort/index.vue"
import { reqCategory2List, reqCategory2UnitList } from "@/apis/category"
import type { AnyObject } from '@/types/category';
const router = useRouter()
const route = useRoute()


/* 定义响应式数据 */
/* tabs对应index */
let active = ref(0)
let title = ref("")
let isShow = ref(false)
let categoryId = ref(2)
let titleList = ref<AnyObject>({})
let sortList = ref(["综合排序", "最多播放", "最近更新"])
let pageNum = ref(1)  // 页码
let pageSize = ref(10) // 每页的数量
let sort = ref(1) // 排序
let sortActive = ref(1) // 排序的高亮
let metadataValues = ref('') // 请求的分类数据
let unitList = ref<AnyObject[]>([]) // 主体数据
let loading = ref(true) // 加载状态
let index = ref(0) // 上级传入的index
const finished = ref(false)
/* 改变显示隐藏的回调 */
const changeBool = () => {
  isShow.value = !isShow.value
}



/* 生命周期 */
onMounted(() => {
  index.value = Number(route.query.index)
  title.value = route.query.title + ""
  categoryId.value = Number(route.query.categoryId)
  metadataValues.value = (route.query.title) + ""
  getCategory2List(categoryId.value)
  getUnitList()
})

/* 获取列表数据的功能函数 */
const getCategory2List = async (categoryId: number | string) => {
  try {
    let res = await reqCategory2List(categoryId)
    if (res.ret == 200) {
      titleList.value = res.data.metadata[0].metadataValues[index.value].metadataValues[0].metadataValues
    }
  } catch (error) {
    console.log(error);
  }
}

/* 点击头部返回上级页面的回调 */
const goBack = () => {
  router.push({
    path: "/classification"
  })
}

/* 子组件改变sort的功能函数 */
const changeSort = (number: number) => {
  if (number == 1) {
    sort.value = 1
  } else if (number == 2) {
    sort.value = 3
  } else if (number == 3) {
    sort.value = 2
  }

  sortActive.value = number
  pageNum.value = 1
  unitList.value = []
  getUnitList()
}

/* 点击标签页的回调 */
const getNewData = (e: any) => {
  if (e.target.innerText == "全部") {
    unitList.value = []
    metadataValues.value = title.value
    getUnitList()
    return
  }
  metadataValues.value = title.value ? title.value + "," + e.target.innerText : e.target.innerText
  unitList.value = []
  getUnitList()
}


/* 获取主体列表数据的功能函数 */
const getUnitList = async () => {
  let data = {
    categoryId: categoryId.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    sort: sort.value,
    metadataValues: metadataValues.value
  }
  try {
    loading.value = true
    let res = await reqCategory2UnitList(data)
    pageNum.value++
    let item = res.data.albums

    unitList.value.push(...item)
    loading.value = false
  } catch (error) {
    console.log(error);
  }
}

/* 滚动主体的回调 */
const scrollHandler = (res: any) => {
  if (res.scrollTop > pageNum.value * 560) {
    ++pageNum.value
    getUnitList()
  }
}

/* 点击主体内容跳转到详情的回调 */
const toDetail = (item: AnyObject) => {
  router.push({
    name: "Course",
    params: {
      albumId: item.albumId,
    },
    query: {
      anchorId: item.anchorId,
      userNickname: item.albumTitle,
    },
  });
}


/* 点击头部登录的回调 */
const toLogin = () => {
  router.push({
    path: `/login`
  })
}

/* 点击头部搜索框的回调 */
const toSearch = () => {
  router.push({
    path: `/search`
  })
}

/* 点击弹窗的 '全部' 回调 */
const clickAllHandler = () => {
  isShow.value = false
  active.value = 0
  metadataValues.value = ""
  unitList.value = []
  getUnitList()
}

/* 点击弹窗中的按钮的回调 */
const clickDialogHandler = (itemStr: string, index: number) => {
  isShow.value = false
  active.value = index + 1
  metadataValues.value = itemStr
  unitList.value = []
  getUnitList()
}

</script>

<style lang="less" scoped>
.category_container {
  width: 375px;
  position: relative;

  .header_wrap {
    background-color: #fff;
  }

  // 导航部分
  .topNavbar {
    width: 375px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 15px 5px;
    padding-left: 0px;
    box-sizing: border-box;
  }

  .go_back {
    width: 95px;
    height: 18px;
    justify-content: center;
    align-items: center;
    padding-right: 10px;

    .cate_title {
      height: 28px;
      font-size: 14px;
      line-height: 28px;
    }
  }

  .btn_box {
    width: 68px;
    height: 30px;
    background-color: #FA2800;
    border-radius: 15px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
  }

  .searchBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 182px;
    height: 30px;
  }

  .searchBar {
    display: flex;

    align-items: center;
    width: 345.2px;
    height: 30px;
    background-color: rgb(239, 241, 244);
    border-radius: 20px;
  }

  .search_icon {
    width: 14px;
    height: 14px;
    margin-left: 10px;
  }

  .search_text {
    font-size: 12px;
    color: #ABABAB;
    margin-left: 10px;
  }

  /* 标签页部分 */
  .header_container {
    width: 100%;
    box-sizing: border-box;

    .tabs_container {
      width: 100%;
      box-sizing: border-box;
    }

    .arrow_container {
      width: 44px;
      height: 43px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .dialog_container {
    width: 375;
    box-sizing: border-box;
    position: absolute;
    top: 50px;
    background-color: #fff;
    z-index: 9;

    .dialog_head {
      width: 375px;
      display: flex;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;

      .dialog_text {
        width: 85px;
        height: 45px;
        font-size: 14px;
        line-height: 45px;
        padding-left: 15px;
        color: #a3a3ac;
      }

      .icon_wrapper {
        width: 44px;
        height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;

      }
    }

    .dialog_main {
      width: 375px;
      background-color: #fff;
      box-sizing: border-box;
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
      box-sizing: border-box;
      flex-wrap: wrap;
      justify-content: flex-start;

      .dialog_item {
        width: 27%;
        height: 32px;
        background-color: #f3f4f5;
        margin: 7.5px 0;
        font-size: 16px;
        line-height: 32px;
        text-align: center;
        margin: 7.5px 10px;
        border-radius: 5px;
        color: #40404c;
      }
    }
  }

  .loading {
    box-sizing: border-box;
    width: 375px;
    font-size: 16px;
    color: #f86442;
    text-align: center;
  }
}
</style>